<template>
  <div>
    <bread></bread>

    <!-- 卡片 -->
    <el-card class="box-card"
             style="line-height: 0;">
      <div style="margin-top: 15px;display:flex; margin-bottom: 10px ">
        <el-input style="width:450px"
                  placeholder="请输入内容"
                  v-model="paramsObj.query"
                  class="input-with-select">
          <el-button @click.native="getUsers"
                     slot="append"
                     icon="el-icon-search"></el-button>

        </el-input>
        <el-button style="margin-left:20px"
                   @click="addUser"
                   type="primary">添加数据</el-button>
      </div>

      <!-- 表格 -->
      <el-table border
                :data="tableData"
                style="width: 100%">
        <el-table-column type="index"
                         label="#"
                         width="50">
        </el-table-column>
        <el-table-column label="姓名"
                         width="180"
                         prop="username">
        </el-table-column>
        <el-table-column label="邮箱"
                         width="180"
                         prop="email">
        </el-table-column>
        <el-table-column label="电话"
                         width="180"
                         prop="mobile">
        </el-table-column>
        <el-table-column label="角色"
                         width="180"
                         prop="role_name">
        </el-table-column>
        <el-table-column label="状态"
                         width="180"
                         prop="mg_state">
          <template slot-scope="scope">
            <el-switch @change="changeHandle(scope.row.id,scope.row.mg_state)"
                       v-model="scope.row.mg_state"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </template>

        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="primary"
                       @click="handleEdit(scope.row)"
                       icon="el-icon-edit"></el-button>
											 <!-- 删除 -->
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.row.id)"
                       icon="el-icon-delete"></el-button>
            <el-tooltip class="item"
                        effect="dark"
                        content="分配权限"
                        placement="top">
              <el-button size="mini"
                         type="warning"
                         icon="el-icon-setting"></el-button>
            </el-tooltip>
          </template>

        </el-table-column>
      </el-table>
      <!-- 表格 -->

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="paramsObj.pagenum"
                     :page-sizes="[1, 2,3,4,6]"
                     :page-size="paramsObj.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     style="text-align: left; margin-top:10px">
      </el-pagination>

      <!-- 添加用户的 弹出的对话框 -->
      <el-dialog title="添加用户"
                 @close="close"
                 :visible.sync="dialogFormVisible">
        <el-form :model="form"
                 ref="refAdd"
                 :rules="rules">
          <el-form-item label="用户名"
                        prop="username"
                        label-width="120px">
            <el-input v-model="form.username"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码"
                        prop="password"
                        label-width="120px">
            <el-input v-model="form.password"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱"
                        prop="email"
                        label-width="120px">
            <el-input v-model="form.email"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话"
                        prop="mobile"
                        label-width="120px">
            <el-input v-model="form.mobile"
                      autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="submitHandle">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 编辑用户对话框 -->
      <el-dialog title="编辑用户"
                 @close="close"
                 :visible.sync="dialogFormVisibleEdit">
        <el-form :model="formEdit"
                 ref='refEdit'
                 :rules="rules">
          <el-form-item label="用户名"
                        label-width="120px">
            <el-input :disabled="true"
                      v-model="formEdit.username"
                      autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="邮箱"
                        prop="email"
                        label-width="120px">
            <el-input v-model="formEdit.email"
                      autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="电话"
                        prop="mobile"
                        label-width="120px">
            <el-input v-model="formEdit.mobile"
                      autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
          <el-button type="primary"
                     @click="submitHandleEdit">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>
           
<script>
import { usersApi, addUsersApi, delUsersApi, editUsersApi, editStateUsersApi } from '@/api/'

export default {
  name: '',
  data () {
    //定义弹出框里的校验规则
    var validateMobile = (rule, value, callback) => {
      //  value===他表示的是表单的value值
      //  编写正则
      var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (!reg.test(value)) {
        callback(new Error('请输入合法的手机号'));
      } else {

        callback();
      }
    };
    // 定义校验规则
    return {
      tableData: [],
      paramsObj: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      total: 0,
      dialogFormVisible: false, //添加用户对话框 先隐藏
      form: {
        username: '',
        password: '',
        email: '',
        moblie: '',
      },
      //规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        mobile: [
          /* 自定义的校验规则 */
          { required: true, message: '请输入合法的手机号', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ]
      },
      //编辑
      dialogFormVisibleEdit: false, //先隐藏编辑的弹出层
      formEdit: {
        username: '1',
        email: '2',
        moblie: '3'
      }
    }
  },
  created () {
    this.getUsers()
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.paramsObj.pagesize = val
      this.getUsers() //重新根据页面获取数据
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.paramsObj.pagenum = val
      this.getUsers() //重新根据页面获取数据
    },

    //点击编辑对话框中的确认按钮
    submitHandleEdit () {
      // 1-二次校验
      this.$refs.refEdit.validate(async (valid) => {
        if (valid) {
          //  校验成功
          // 2-封装函数发送请求
          const res = await editUsersApi(this.formEdit)
          // 3-关闭对话框 清空数据
          this.close()
          // 4-刷新数据
          this.getUsers()
        }
      })
    },
    //更改状态
    async changeHandle (id, state) {
      console.log(id, state, 666);
      await editStateUsersApi(id, state)
    },

    /* 表格事件 */
    handleEdit (row) {
      console.log(row, 9666);
      this.dialogFormVisibleEdit = true //点击编辑框就弹出对话框
      this.formEdit = row
    },
    handleDelete (id) {
      console.log(id, 999);
      this.$confirm('是否要删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //点击确认按钮时删除用户
        const res = await delUsersApi(id)
        //刷新数据
        this.getUsers()

        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    async getUsers () {
      const res = await usersApi(this.paramsObj)
      console.log(res, 88);
      this.tableData = res.data.data.users;
      // 获取总条数
      this.total = res.data.data.total
    },

    addUser () {
      //点击添加用户按钮-显示对话框
      this.dialogFormVisible = true
    },
    //关闭对话框的回到函数
    close () {
      // 清空表单内数据
      this.from = {
        username: '',
        password: '',
        email: '',
        moblie: ''
      }
      this.dialogFormVisible = false //关闭对话框
    },
    //点击对话框确认按钮 进行二次校验
    submitHandle () {
      /* 
      1-二次校验
      2-封装函数发送请求
      3-关闭对话框 清空数据
      4-刷新数据
       */
      // 1-二次校验
      this.$refs.refAdd.validate(async (valid) => {
        if (valid) {
          console.log(1234);
          //  校验成功
          // 2-封装函数发送请求
          const res = await addUsersApi(this.form)
          // 3-关闭对话框 清空数据
          this.close()
          // 4-刷新数据
          this.getUsers()
        }
      })
    }

  },

}
</script>
<style lang='less'  scoped>
</style>
